<template>
  <div class="bottom-nav">
    <ul class="nav-list">
      <li 
        v-for="(item, index) in menuList" 
        :key="index" 
        class="nav-item"
      >
        <router-link 
          :to="item.path" 
          class="nav-link"
          :class="{ active: isActive(item.path) }"
          @click="handleClick(item.path)"
        >
          <div class="icon-wrapper">
            <svg width="24" height="24" viewBox="0 0 24 24">
              <use :xlink:href="item.icon"></use>
            </svg>
          </div>
          <span>{{ item.label }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const currentPath = ref(router.currentRoute.value.path);

const menuList = [
  { path: '/yonghu/online-registration', label: '在线挂号', icon: '#registration-icon' },
  { path: '/yonghu/doctor-search', label: '名医搜索', icon: '#hospital-icon' },
  { path: '/yonghu/hospital-info', label: '医院信息', icon: '#hospital-icon' },
  { path: '/yonghu/my', label: '我的', icon: '#my-icon' }
];

const isActive = (path) => {
  return currentPath.value === path;
};

const handleClick = (path) => {
  currentPath.value = path;
};
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #fff;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
}

.nav-list {
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  padding: 8px 0;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
  padding: 5px;
}

.nav-link.active {
  color: #165DFF;
}

.icon-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.nav-link.active .icon-wrapper {
  transform: translateY(-5px);
}

.nav-link svg {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
  fill: #666;
}

.nav-link.active svg {
  fill: #165DFF;
  transform: scale(1.2);
}

.nav-link span {
  font-size: 12px;
  transition: all 0.3s ease;
  position: relative;
  top: 3px;
}

.nav-link.active span {
  font-weight: 500;
}

.login-item {
  width: 20%;
}

.login-link {
  color: #666;
}

.login-link.active {
  color: #165DFF;
}

.login-link svg {
  fill: #666;
}

.login-link.active svg {
  fill: #165DFF;
}
</style>
  